path: root/app/[lng]/test/agentforce-poc-summary/page.tsx

"use client";

import * as React from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Plus, Trash2, Send, Loader2 } from "lucide-react";
import { toast } from "sonner";

interface ChatMessage {
  id: string;
  sender: "SHI" | "Partner";
  message: string;
}

interface SummaryResponse {
  issue: string;
  request: string;
  summary: string;
}

export default function AgentForcePOCSummaryPage() {
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: "1",
      sender: "SHI",
      message: "최근 입고된 발전기 제어반 견적서에서 납기 조건 누락을 확인했습니다. 계약 전 꼭 납기 포함한 수정본 제출 부탁드립니다."
    },
    {
      id: "2", 
      sender: "Partner",
      message: "네, 누락 사항 확인 후 납기 조건 명시하여 오늘 중으로 재제출 하겠습니다."
    },
    {
      id: "3",
      sender: "SHI", 
      message: "감사합니다. 납기 조건은 계약 핵심 조항입니다. 반드시 반영해 주세요."
    }
  ]);
  
  const [summaryResult, setSummaryResult] = useState<SummaryResponse | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  // 새 메시지 추가
  const addMessage = () => {
    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      sender: "SHI",
      message: ""
    };
    setMessages([...messages, newMessage]);
  };

  // 메시지 삭제
  const removeMessage = (id: string) => {
    if (messages.length > 1) {
      setMessages(messages.filter(msg => msg.id !== id));
    } else {
      toast.error("최소 1개의 메시지는 유지해야 합니다.");
    }
  };

  // 메시지 업데이트
  const updateMessage = (id: string, field: keyof ChatMessage, value: string) => {
    setMessages(messages.map(msg => 
      msg.id === id ? { ...msg, [field]: value } : msg
    ));
  };

  // 요약 API 호출
  const handleSummarize = async () => {
    // 유효성 검사
    const emptyMessages = messages.filter(msg => !msg.message.trim());
    if (emptyMessages.length > 0) {
      toast.error("모든 메시지를 입력해주세요.");
      return;
    }

    setIsLoading(true);
    try {
      // 토큰 가져오기
      const tokenResponse = await fetch('https://pyheroku-d21d18e4f257.herokuapp.com/api/getToken', {
        method: 'POST'
      });

      if (!tokenResponse.ok) {
        throw new Error('토큰을 가져오는데 실패했습니다.');
      }

      const tokenData = await tokenResponse.json();
      const accessToken = tokenData.access_token;

      if (!accessToken) {
        throw new Error('토큰이 없습니다.');
      }

      // 요약 API 호출
      const summaryResponse = await fetch(`https://connect-flow-8014--ps.sandbox.my.salesforce.com/services/apexrest/summarizeChat/`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            chatlog: JSON.stringify(messages.map(msg => ({
            sender: msg.sender,
            message: msg.message
          })))
        })
      });

      if (!summaryResponse.ok) {
        throw new Error(`API 호출 실패: ${summaryResponse.status}`);
      }

      const result = await summaryResponse.json();
      setSummaryResult(result);
      toast.success("요약이 완료되었습니다.");
    } catch (error) {
      console.error('요약 API 호출 실패:', error);
      toast.error(`요약 중 오류가 발생했습니다: ${error instanceof Error ? error.message : '알 수 없는 오류'}`);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container mx-auto py-8 space-y-6">
      <div className="text-center space-y-2">
        <h1 className="text-3xl font-bold">AgentForce POC 요약 테스트</h1>
        <p className="text-muted-foreground">
          대화 기록을 입력하고 AI 요약 기능을 테스트해보세요
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 입력 섹션 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              대화 기록 입력
              <Button onClick={addMessage} size="sm" variant="outline">
                <Plus className="h-4 w-4 mr-2" />
                메시지 추가
              </Button>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {messages.map((message, index) => (
              <div key={message.id} className="space-y-2 p-4 border rounded-lg">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Badge variant={message.sender === "SHI" ? "default" : "secondary"}>
                      {message.sender}
                    </Badge>
                    <span className="text-sm text-muted-foreground">메시지 {index + 1}</span>
                  </div>
                  <Button
                    onClick={() => removeMessage(message.id)}
                    size="sm"
                    variant="ghost"
                    className="text-red-500 hover:text-red-700"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
                
                <div className="space-y-2">
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      variant={message.sender === "SHI" ? "default" : "outline"}
                      onClick={() => updateMessage(message.id, "sender", "SHI")}
                    >
                      SHI
                    </Button>
                    <Button
                      size="sm"
                      variant={message.sender === "Partner" ? "default" : "outline"}
                      onClick={() => updateMessage(message.id, "sender", "Partner")}
                    >
                      Partner
                    </Button>
                  </div>
                  
                  <Textarea
                    value={message.message}
                    onChange={(e) => updateMessage(message.id, "message", e.target.value)}
                    placeholder="메시지를 입력하세요..."
                    className="min-h-20"
                  />
                </div>
              </div>
            ))}

            <Button 
              onClick={handleSummarize} 
              disabled={isLoading}
              className="w-full"
            >
              {isLoading ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  요약 중...
                </>
              ) : (
                <>
                  <Send className="h-4 w-4 mr-2" />
                  요약하기
                </>
              )}
            </Button>
          </CardContent>
        </Card>

        {/* 결과 섹션 */}
        <Card>
          <CardHeader>
            <CardTitle>요약 결과</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {summaryResult ? (
              <div className="space-y-4">
                <div className="space-y-2">
                  <h4 className="font-semibold text-sm text-muted-foreground">이슈</h4>
                  <div className="p-3 bg-muted rounded-md">
                    {summaryResult.issue}
                  </div>
                </div>
                
                <div className="space-y-2">
                  <h4 className="font-semibold text-sm text-muted-foreground">요청</h4>
                  <div className="p-3 bg-muted rounded-md">
                    {summaryResult.request}
                  </div>
                </div>
                
                <div className="space-y-2">
                  <h4 className="font-semibold text-sm text-muted-foreground">요약 메시지</h4>
                  <div className="p-3 bg-muted rounded-md">
                    {summaryResult.summary}
                  </div>
                </div>
              </div>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                <Send className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>요약하기 버튼을 클릭하여 결과를 확인하세요</p>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 미리보기 섹션 */}
      <Card>
        <CardHeader>
          <CardTitle>API 요청 미리보기</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <h4 className="font-semibold text-sm text-muted-foreground mb-2">Request Body</h4>
              <pre className="bg-muted p-4 rounded-md text-sm overflow-x-auto">
                {JSON.stringify({
                  conversation: JSON.stringify(messages.map(msg => ({
                    sender: msg.sender,
                    message: msg.message
                  })))
                }, null, 2)}
              </pre>
            </div>
            
            {/* <div>
              <h4 className="font-semibold text-sm text-muted-foreground mb-2">Headers</h4>
              <pre className="bg-muted p-4 rounded-md text-sm overflow-x-auto">
                {JSON.stringify({
                  'Authorization': 'Bearer {access_token}',
                  'Content-Type': 'application/json'
                }, null, 2)}
              </pre>
            </div> */}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}